<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>员工管理</title>
</head>
<body class="hold-transition skin-black sidebar-mini">
    <div th:replace="common/fragment :: link"></div>
    <div class="wrapper">
        <div th:replace="common/fragment :: navbar"></div>
        <div th:replace="common/fragment :: menu"></div>
        <div class="content-wrapper">
            <section class="content-header">
                <h1>员工编辑</h1>
            </section>
            <section class="content">
                <div class="box">
                    <form class="form-horizontal" action="/student/saveOrUpdate" method="post" id="editForm" >
                        <input type="hidden" name="id" th:value="${student?.id}">
                        <div class="form-group" style="margin-top: 10px;">
                            <label class="col-sm-2 control-label">用户名：</label>
                            <div class="col-sm-6">
                                <input type="text" class="form-control" name="username" th:disabled="${student!=null}" th:value="${student?.username}" placeholder="请输入用户名">
                            </div>
                        </div>
                        <div class="form-group" style="margin-top: 10px;">
                            <label class="col-sm-2 control-label">真实姓名：</label>
                            <div class="col-sm-6">
                                <input type="text" class="form-control" name="name" th:value="${student?.name}"  placeholder="请输入真实姓名">
                            </div>
                        </div>
                        <div class="form-group" th:if="${student==null}">
                            <label for="password" class="col-sm-2 control-label">密码：</label>
                            <div class="col-sm-6">
                                <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码">
                            </div>
                        </div>
                        <div class="form-group" th:if="${student==null}">
                            <label for="repassword" class="col-sm-2 control-label">验证密码：</label>
                            <div class="col-sm-6">
                                <input type="password" class="form-control" id="repassword" name="repassword" placeholder="再输入一遍密码">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="age" class="col-sm-2 control-label">年龄：</label>
                            <div class="col-sm-6">
                                <input type="text" class="form-control" id="age" name="age" th:value="${student?.age}" placeholder="请输入年龄">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="room.id" class="col-sm-2 control-label">宿舍编号：</label>
                            <div class="col-sm-6">
                                <!--                                <input type="text" class="form-control" id="room" name="room" th:value="${student?.room}" placeholder="请输入宿舍编号">-->
                                <select class="form-control" id="room.id" name="roomId">
                                    <option value="">请选择</option>
                                    <option th:each="room:${rooms}"
                                            th:value="${room?.id}"
                                            th:text="${room?.room_id}"
                                    th:selected="${room?.id==student?.room?.id}">
                                    </option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group" id="adminDiv">
                            <label for="admin" class="col-sm-2 control-label">超级管理员：</label>
                            <div class="col-sm-6" style="margin-left: 15px;">
                                <input type="checkbox" id="admin" name="admin" th:checked="${student?.admin}" class="checkbox" >
                            </div>
                        </div>
                        <div class="form-group" id="roleDiv">
                            <label for="role" class="col-sm-2 control-label">分配角色：</label><br/>
                            <div class="row" style="margin-top: 10px">
                                <div class="col-sm-2 col-sm-offset-2">
                                    <select multiple class="form-control allRoles" id="role" style="height: 350px;" size="15">
                                        <option th:each="role:${roleList}"
                                                th:value="${role?.id}"
                                                th:text="${role?.name}">
                                        </option>
                                    </select>
                                </div>
                                <div class="col-sm-1" style="margin-top: 60px;" align="center">
                                    <div>

                                        <a type="button" class="btn btn-primary  " style="margin-top: 10px" title="右移动"
                                           onclick="moveSelected('allRoles', 'selfRoles')">
                                            <span class="glyphicon glyphicon-menu-right"></span>
                                        </a>
                                    </div>
                                    <div>
                                        <a type="button" class="btn btn-primary " style="margin-top: 10px" title="左移动"
                                           onclick="moveSelected('selfRoles', 'allRoles')">
                                            <span class="glyphicon glyphicon-menu-left"></span>
                                        </a>
                                    </div>
                                    <div>
                                        <a type="button" class="btn btn-primary " style="margin-top: 10px" title="全右移动"
                                           onclick="moveAll('allRoles', 'selfRoles')">
                                            <span class="glyphicon glyphicon-forward"></span>
                                        </a>
                                    </div>
                                    <div>
                                        <a type="button" class="btn btn-primary " style="margin-top: 10px" title="全左移动"
                                           onclick="moveAll('selfRoles', 'allRoles')">
                                            <span class="glyphicon glyphicon-backward"></span>
                                        </a>
                                    </div>
                                </div>
                                <div class="col-sm-2">
                                    <select multiple class="form-control selfRoles" style="height: 350px;" size="15" name="roleIds">
                                        <option th:each="role:${studentRoleList}"
                                                th:value="${role?.id}"
                                                th:text="${role?.name}">
                                        </option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-1 col-sm-6">
                                <button type="submit" class="btn btn-primary btn-submit">保存</button>
                                <a href="javascript:window.history.back()" class="btn btn-danger">取消</a>
                            </div>
                        </div>
                    </form>
                </div>
            </section>
            <script>
                //全部左右移动
                function moveAll(source, target) {
                    $('.' + target).append($('.' + source + '> option'));
                }
                //左右移动
                function moveSelected(source, target) {
                    $('.' + target).append($('.' + source + '> option:selected'));
                }
                //去重
                $(function () {
                    var arr = [];
                    $(".selfRoles>option").each(function (index, domEle) {
                        arr.push($(domEle).val());
                    });

                    $(".allRoles>option").each(function (index, domEle) {
                        if ($.inArray($(domEle).val(), arr) >= 0) {
                            $(domEle).remove();
                        }
                    });
                });
                //提交

                //隐藏角色框
                $(function () {
                    if ($("#admin").prop('checked')){
                        $("#roleDiv").addClass("hidden");
                    }else{
                        $("#roleDiv").removeClass("hidden");
                    }
                });

                //点击权限隐藏显示角色框
                $("#admin").click(function () {
                    if ($("#admin").prop('checked')){
                        $("#roleDiv").addClass("hidden");
                    }else{
                        $("#roleDiv").removeClass("hidden");
                    }
                });
            </script>
            <script>
                $("#editForm").bootstrapValidator({
                    feedbackIcons: { // 图标
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields:{ // 配置要验证的字段
                        username:{
                            validators:{ // 验证的规则
                                notEmpty:{ // 不能为空
                                    message:"用户名必填" // 错误时的提示信息
                                },
                                stringLength: { // 字符串的长度范围
                                    min: 2,
                                    max: 10,
                                    message:"用户名长度为 2~10 位"
                                },
                                regexp:{
                                    regexp: /^[a-zA-Z0-9_\.]+$/,
                                    message: "只能使用英文数字_."
                                },
                                remote:{
                                    type:"POST",
                                    //todo
                                    url:"/student/checkUsername",
                                    message:"用户名已存在"
                                }
                            }
                        },
                        name:{
                            validators:{ // 验证的规则
                                notEmpty:{ // 不能为空
                                    message:"姓名必填" // 错误时的提示信息
                                },
                                stringLength: { // 字符串的长度范围
                                    min: 2,
                                    max: 6,
                                    message:"真实姓名长度位 2~6 位"
                                }
                            }
                        },
                        password:{
                            validators:{
                                notEmpty:{ // 不能为空
                                    message:"密码必填" // 错误时的提示信息
                                },
                                different:{
                                    field: "username",
                                    message:"账号与密码不能相同"
                                }
                            }
                        },
                        repassword:{
                            validators:{
                                notEmpty:{ // 不能为空
                                    message:"密码必填" // 错误时的提示信息
                                },
                                identical: {// 两个字段的值必须相同
                                    field: 'password',
                                    message: '两次输入的密码必须相同'
                                },
                            }
                        },

                        age:{
                            validators: {
                                between: { // 数字的范围
                                    min: 18,
                                    max: 60,
                                    message:"年龄范围位 18~60 岁"
                                }
                            }
                        },
                        roomId:{
                            validators:{ // 验证的规则
                                notEmpty:{ // 不能为空
                                    message:"宿舍编码不能为空" // 错误时的提示信息
                                },
                                remote:{
                                    type:"POST",
                                    //todo
                                    url:"/student/checkRoomPerson",
                                    message:"当前人数已满"
                                }
                            }
                        }
                    }
                }).on('success.form.bv', function(e) {
                    //表单的提交按钮必须为 submit 才可以执行到这里
                    // 阻止表单提交
                    e.preventDefault();
                    //选中数据
                    $(".selfRoles>option").prop('selected', true);
                    $.post(
                        "/student/saveOrUpdate",
                        $("#editForm").serialize(),
                        function (result) {
                            if (result.success){
                                window.location.href = "/student/list";
                            }else {
                                Swal.fire({
                                    title: result.msg,
                                    icon: "error",
                                });
                            }
                        }
                    );
                });
            </script>
        </div>
        <div th:replace="common/fragment :: footer"></div>
    </div>
</body>
</html>